<template>
  <div v-show="isReady">
    <ReportForm v-if="isReady"
      :formConfig="formConfig"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import ReportForm from './reportForm.vue';
import { ReportPageController } from '@/api/reportController.js';

export default {
  name: 'reportPageRender',
  props: {
    pageId: {
      type: String,
      required: true
    },
    params: {
      type: String
    }
  },
  components: {
    ReportForm
  },
  data () {
    return {
      isReady: false,
      formConfig: undefined
    }
  },
  methods: {
    loadReportPage () {
      this.isReady = false;
      ReportPageController.view(this, {
        pageId: this.pageId
      }).then(res => {
        let temp = {
          pageId: res.data.pageId,
          pageName: res.data.pageName,
          pageCode: res.data.pageCode,
          groupId: res.data.groupId,
          pageJson: res.data.pageJson,
          formInfo: res.data.pageJson ? JSON.parse(res.data.pageJson) : {}
        }
        let formInfo = temp.formInfo.mobile;
        if (formInfo != null) {
          this.formConfig = {
            pageId: temp.pageId,
            pageName: temp.pageName,
            pageCode: temp.pageCode,
            gutter: formInfo.gutter || 20,
            labelWidth: formInfo.labelWidth || 100,
            labelPosition: formInfo.labelPosition || 'left',
            customFieldList: formInfo.customFieldList || [],
            filterItemWidth: formInfo.filterItemWidth || 350,
            widgetList: formInfo.widgetList || [],
            paramList: formInfo.paramList || []
          }
          this.isReady = true;
        } else {
          this.$dialog.alert({
            title: '提示',
            message: '没有找到移动端配置信息！'
          }).finally(() => {
            this.$router.go(-1);
          });
        }
      }).catch(e => {});
    }
  },
  computed: {
    ...mapGetters(['getMainContextHeight'])
  },
  watch: {
    pageId: {
      handler () {
        this.loadReportPage();
      },
      immediate: true
    }
  }
}
</script>

<style>
</style>
